<template>
    <el-row class="login" v-cloak>
        <img src="@assets/Images/bg.png" />
        <i class="iconfont icongw-icon-shezhi" @click.stop="loginOutServerContent"></i>
        <section class="main">
            <aside class="logo_box">
                <div class="logo_bj">
                    <el-col :span="24" class="login_top">
                        <img :src="mainImg" alt />
                    </el-col>
                </div>
            </aside>
            <aside class="login_form">
                <h2>
                    <h3>{{$t('login.main.title')}}</h3>
                    <h5>{{$t('login.main.subTitle')}}</h5>
                </h2>
                <p class="number">
                    <span>
                        <i class="iconfont icongw-icon-shezhi-renyuan"></i>
                        <span class="label">{{$t('login.main.formItem[0]')}}</span>
                    </span>
                    <span>
                        <el-input v-model="userName" @keyup.enter.native="login" :placeholder="$t('login.main.placeholder[0]')" autocomplete="off"></el-input>
                    </span>
                </p>
                <p>
                    <span>
                        <i class="iconfont iconmima"></i>
                        <span class="label">{{$t('login.main.formItem[1]')}}</span>
                    </span>
                    <span>
                        <el-input :type='passwordSetAttr?"text":"password"' v-model="userPwd" @keyup.enter.native="login" :placeholder="$t('login.main.placeholder[1]')" autocomplete="off">
                            <i :class='passwordSetAttr?"iconfont icongw-icon-zhuce-kanjian":"iconfont icongw-icon-zhuce-yingchang"' slot="suffix" @click.stop="onpreviewPassword"></i>
                        </el-input>
                    </span>
                </p>
                <!-- <span class="loading" v-if="loading" :loading='loading'>{{$t('login.main.button[0]')}}</span> -->
                <el-button type="primary" class="loading" @click.stop="login" :loading='loading'>{{$t('login.main.button[1]')}}</el-button>

            </aside>

        </section>
        <drag-code :dragCodeFlag="dragCodeFlag" @reLogin="reLogin"></drag-code>
    </el-row>

</template>

<script>
import dragCode from '../../components/app-drag/index.vue'
export default {
    components: { dragCode },
    data () {
        return {
            userName: '',
            userPwd: '',
            verificationCode: '',
            loading: false,
            verificationKey: '',
            footer: '',
            mainImg: '../../../static/Images/logoWord.png',
            footerImg: '../../../static/Images/logo.png',
            showMaintain: false,
            passwordSetAttr: false,
            dragCodeFlag: false,
            reLoginStatus: false
        };
    },
    created () {

        // 获取中英文版本状态
        sessionStorage.languageSet = 'zh-CN';
        this.$i18n.locale = 'zh-CN';

        // 中英文暂时接口未迁移，后期接口迁移再恢复
        // this.getLanguageLogos();

    },
    mounted () {
        this.Axios({
            methed: 'get',
            url: '../../../../static/json/config.json'
        }).then(res => {
            let data = res.data;
            if (sessionStorage.languageSet === 'zh-CN') {
                document.title = data.zh.docTitle;
                this.footer = data.zh.company;
            } else {
                document.title = data.en.docTitle;
                this.footer = data.en.company;
            }
            this.mainImg = data.img.loginImg;
            this.footerImg = data.img.loginFooterImg;
        }).catch((err) => {
            console.log(err);
        });

        this.userName = '';
        this.userPwd = '';
        this.verificationCode = '';

        // 输出
        // this.judgeVersion();

    },
    methods: {

        // 读取中英文状态
        getLanguageLogos () {
            this.$api.getLanguageLogo().then((rt) => {
                if (rt.data.code === 200) {
                    this.$i18n.locale = rt.data.data.language;
                    sessionStorage.languageSet = rt.data.data.language;
                } else {
                    this.$message.error(rt.data.message);
                }
            }).catch((err) => {
                console.log(err);
            });
        },

        // 获取验证码
        drawCode () {
            this.verificationCode = '';
            this.$api
                .getVerificationCode()
                .then((res) => {
                    if (res.data.code == 200) {
                        let image = document.getElementById('code_img');
                        this.verificationKey = res.data.data.verificationKey;
                        image.src = res.data.data.verificationCode;
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch((err) => {
                    try {
                        this.$message.error(err.data.message);
                    } catch (e) {
                        this.$message.error(this.$t('login.systemError'));
                    }
                    console.log(err);
                });
        },

        // 提示
        info (type, msg) {
            this.$message({
                message: msg,
                type: type
            });
        },

        // 登录
        async login () {

            // 登录操作
            // if (this.loading) {
            //     return false;
            // }
            this.loading = true;
            this.$message.close();
            if (!this.userName && !this.userPwd) {
                this.$message.error(this.$t('login.msg.beforeLogin[1]'));
                this.loading = false;
                return false;
            } else if (!this.userName && this.userPwd) {
                this.$message.error(this.$t('login.msg.beforeLogin[2]'));
                this.loading = false;
                return false;
            } else if (this.userName && !this.userPwd) {
                this.$message.error(this.$t('login.msg.beforeLogin[3]'));
                this.loading = false;
                return false;
            }
            if (this.userName.indexOf(' ') > -1) {
                this.$message.error(this.$t('login.msg.beforeLogin[5]'));
                this.loading = false;
                return false;
            }
            if (this.reLoginStatus) {
                this.loading = false;
                this.dragCodeFlag = true;
                return;
            }

            this.$api
                .login({
                    userName: await this.$getCode.RSAEncrypt(this.userName),
                    password: await this.$getCode.RSAEncrypt(this.userPwd)
                })
                .then((rt) => {
                    let data = rt.data;
                    if (data.code == 200) {
                        localStorage.menuActive = ''; // 导航菜单高亮
                        localStorage.breadcrumbList = ''; // 面包屑导航
                        localStorage.historicalList = ''; // 历史导航菜单

                        sessionStorage.SRToken = 'Bearer ' + rt.data.data.accessToken;
                        window.sessionStorage.userName = this.userName;

                        window.sessionStorage.setItem(
                            'accessToken',
                            'Bearer ' + rt.data.data.accessToken
                        );
                        window.sessionStorage.setItem('refreshToken', rt.data.data.refreshToken);
                        window.localStorage.ac_session = '';

                        this.$store.dispatch('reflashSet');
                        sessionStorage.personState = false;
                        sessionStorage.roleName = data.data.roleName;
                        this.userName = '';
                        this.userPwd = '';
                        this.verificationCode = '';
                        if (data.data.passwordPolicy != null) {
                            window.sessionStorage.removeItem('passwordPolicy');
                            switch (data.data.passwordPolicy) {
                                case 0:
                                    this.$message.warning('密码过期，请联系管理员');
                                    break;
                                case 1:
                                    window.sessionStorage.passwordPolicy = 1;
                                    this.$router.replace('/index/home');

                                    break;

                                default:
                                    this.$message({
                                        message: this.$t('login.msg.afterLogin[2]'),
                                        type: 'success'
                                    });
                                    this.$router.replace('/index/home');
                                    break;
                            }
                        } else {

                            // 兼容以往版本
                            this.$router.replace('/index/home');
                        }

                    } else {

                        // this.drawCode();
                        this.reLoginStatus = true;
                        this.$message({
                            message: data.message,
                            type: 'error'
                        });
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    try {
                        this.$message.error(err.data.message);
                    } catch (e) {
                        this.$message.error(this.$t('login.systemError'));
                    }
                    console.log(err);
                    this.loading = false;
                    this.reLoginStatus = true;

                    // this.drawCode();
                });
        },
        error (nodesc, msg) {
            this.$Notice.error({
                title: this.$t('login.msg.title'),
                desc: msg
            });
        },

        onMouseEnter (e) {
            this.showMaintain = true;
        },
        onMouseLeave (e) {
            this.showMaintain = false;
        },

        // 进入维护
        toMaintain () {
            window.sessionStorage.clear();
            this.$router.replace('/Maintain');
        },

        // 密码预览
        onpreviewPassword () {
            this.passwordSetAttr = !this.passwordSetAttr;
        },

        // 退出到服务连接
        loginOutServerContent () {
            this.$confirm('您是否退出到服务连接界面', '提示信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                iconClass: 'iconfont icongw-icon-tishi2',
                customClass: 'logout-msg'
            }).then(() => {
                try {
                    myJavaFun.OpenLocalUrl('login');
                } catch (e) {
                }
            }).catch(() => { });
        },

        // 取消验证码弹窗
        reLogin (n) {
            this.dragCodeFlag = false;
            if (n) {
                this.reLoginStatus = false
                this.login();
            }
        },

        // 退出安卓登录页面
        judgeVersion () {
            this.$api.getVerificationCode().then((rt) => {
                if (rt.code == 200) { } else {
                    try {
                        myJavaFun.OpenLocalUrl('login');
                    } catch (e) {
                    }
                }
            }).catch(e => {
                try {
                    myJavaFun.OpenLocalUrl('login');
                } catch (e) {
                }
            })
        }
    }
};
</script>
<style lang="scss" src="@assets/styles/login.scss" scoped></style>
